<template>
  <div class="layout">
    <Layout style="min-height: 99.5vh">
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <div style="height: 84px;text-align: center">
          <Avatar icon="ios-person" size="large" style="margin-top: 15px"/>
          <div style="text-align: center">
            <span style="color: azure;font-size: 4px">超级管理员</span>
          </div>
        </div>
        <Menu active-name="donate" theme="dark" width="auto" :class="menuitemClasses" style="height: 100%" accordion >
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-contact-outline" />
              捐赠管理
            </template>
            <MenuItem name="help-apply"  @click.native="handleClickMenu('help-apply','求助审核','views/manage/help/AuditList.vue')">求助审核</MenuItem>
            <MenuItem name="help-manage" @click.native="handleClickMenu('help-manage','求助管理','views/manage/help/List.vue')">求助管理</MenuItem>
            <MenuItem name="donate-apply" @click.native="handleClickMenu('donate-apply','捐赠审核','views/manage/donate/AuditList.vue')">捐赠审核</MenuItem>
            <MenuItem name="donate-manage" @click.native="handleClickMenu('donate-manage','捐赠管理','views/manage/donate/List.vue')">捐赠管理</MenuItem>
          </Submenu>
          <Submenu name="post">
            <template slot="title">
              <Icon type="ios-contact-outline" />
              论坛
            </template>
            <MenuItem name="post-manage" @click.native="handleClickMenu('post-manage','帖子管理','views/manage/post/List.vue')">帖子管理</MenuItem>
          </Submenu>
          <Submenu name="system">
            <template slot="title">
              <Icon type="ios-settings" />
              系统管理
            </template>
            <MenuItem name="system-user" @click.native="handleClickMenu('idUser','用户管理','views/manage/system/user/List.vue')">用户管理</MenuItem>
            <MenuItem name="system-role" @click.native="handleClickMenu('idRole','角色管理','views/manage/system/role/List.vue')">角色管理</MenuItem>
            <MenuItem name="system-dict" @click.native="handleClickMenu('idDict','数据字典','views/manage/system/dict/type/List.vue')">数据字典</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout >
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Menu mode="horizontal" theme="light" active-name="1"   @on-select="onSelectHandle">
            <!--<Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>-->
            <a style="margin-left: 25px">欢迎进入贺州学院爱心捐赠系统</a>
            <div style="float: right">
              <MenuItem name="index" to="/donate/index">
                <Icon type="logo-windows" />
                网站首页
              </MenuItem>
              <Submenu name="5">
                <template slot="title">
                  <Icon type="ios-contact-outline" />
                  个人中心
                </template>
                <!--<MenuItem name="5-1">个人信息</MenuItem>
                <MenuItem name="5-2">修改信息</MenuItem>-->
                <MenuItem name="logout">退出</MenuItem>
              </Submenu>
            </div>
          </Menu>
        </Header>
        <Content :style="{margin: '10px', background: '#fff', minHeight: '260px'}">
          <MenuTabs  ref="menuTabs"></MenuTabs>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
    import MenuTabs from '../../components/menuTabs/MenuTabs.vue'
    import user from '@/common/user'
    export default {
        components:{
            MenuTabs
        },
        data () {
            return {
                isCollapsed: false
            }
        },
        computed: {
            rotateIcon () {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            collapsedSider () {
                this.$refs.side1.toggleCollapse();
            },
            handleClickMenu(id,label,url){
              this.$refs.menuTabs.handleTabsAdd({label,name:id,url});
            },onSelectHandle(name){
                if(name=="logout"){
                    //退出功能
                    user.logout(this);
                }
            }
        }
    }
</script>
<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-header-bar{
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }
  .menu-icon{
    transition: all .3s;
  }
  .rotate-icon{
    transform: rotate(-90deg);
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
  .ivu-menu-horizontal {
    height: 64px;
  }
</style>
